<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./css/11.css">
    <script src="./js/11.js"></script>
</head>
<body>
<!--
    当表单提交时会触发 onsubmit 事件对应的回调函数
        1. onsubmit 事件取值 return false 表单将会停止跳转(阻止跳转)
        2. onsubmit 绑定的回调方法传入一个固定的参数 event[事件源对象]
                    在回调方法中通过 该参数对象调用内置方法 preventDefault(),可以阻止跳转
                    function aa(e){
                        console.log("submit")
                        e.preventDefault();
                    }
-->
<!--    <form class="register" action="./11.success.html" method="get" onsubmit="return false">-->
<!--    <form class="register" action="./11.success.html" method="get" onsubmit="aa(event)">-->
<form class="register" action="./11.success.html" method="get" onsubmit="checkFormData(event)">
<!-- label 标签是表单标签的配合使用标签，该标签通过for和id的关联，或父子关系实现文本点击的聚焦功能 -->
<!--        <label for="username">用户名:</label>-->
<!--        <input type="text" id="username">-->
<!--        <label>-->
<!--            <span>密码</span>-->
<!--            <input type="text">-->
<!--        </label>-->

<!--
    onfocus : 表单元素获取焦点事件
    onblur : 表单元失去焦点事件
-->
        <label>
            <span>用户名</span>
            <i>:</i>
            <div class="input">
<!--                <input type="text" name="username" onblur="blurUsername()" onfocus="focusUsername()">-->
                <input type="text" name="username">
            </div>
        </label>
        <label>
            <span>登录密码</span>
            <i>:</i>
            <div class="input">
                <input type="text" name="password">
            </div>
        </label>
        <label>
            <span>确认密码</span>
            <i>:</i>
            <div class="input">
                <input type="text" name="repPassword" value="111">
            </div>
        </label>
        <label>
            <span>邮箱</span>
            <i>:</i>
            <div class="input">
                <input type="text" name="email">
            </div>
        </label>
        <label>
            <span>手机号</span>
            <i>:</i>
            <div class="input">
                <input type="text" name="phone">
            </div>
        </label>
        <label>
            <input type="submit" value="注册">
        </label>
    </form>
</body>
</html>